<template>
  <!-- 主布局容器 -->
  <main-layout :username="username" :unread-count="unreadCount">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/" class="breadcrumb mb-15">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>设备管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 页面标题和操作区 -->
    <div class="page-header flex-between mb-15">
      <h2 class="page-title">设备管理</h2>
      <div class="header-actions flex-center">
        <!-- 搜索框：支持设备编号/名称/部件ID搜索 -->
        <el-input
            v-model="searchQuery"
            placeholder="搜索设备编号/名称/部件ID"
            prefix-icon="el-icon-search"
            style="width: 280px; margin-right: 10px"
            @keyup.enter.native="handleSearch"
        ></el-input>
        <!-- 设备类型筛选 -->
        <el-select
            v-model="deviceTypeFilter"
            placeholder="设备类型筛选"
            @change="handleFilter"
            class="mr-10"
        >
          <el-option label="全部类型" value=""></el-option>
          <el-option label="摊青机器" value="T"></el-option>
          <el-option label="杀青机器" value="S"></el-option>
          <el-option label="揉捻机器" value="R"></el-option>
          <el-option label="炒青机器" value="C"></el-option>
          <el-option label="烘青机器" value="H"></el-option>
        </el-select>
        <!-- 设备状态筛选 -->
        <el-select
            v-model="deviceStatusFilter"
            placeholder="设备状态筛选"
            @change="handleFilter"
            class="mr-10"
        >
          <el-option label="全部状态" value=""></el-option>
          <el-option label="运行中" value="运行中"></el-option>
          <el-option label="故障" value="故障"></el-option>
          <el-option label="待机" value="待机"></el-option>
        </el-select>
        <!-- 新增设备按钮 -->
        <el-button type="primary" icon="el-icon-plus" @click="handleAddDevice">
          新增设备
        </el-button>
      </div>
    </div>

    <!-- 设备列表卡片 -->
<!--    <el-card class="device-table" shadow="hover">-->
<!--      <div slot="header" class="flex-between">-->
<!--        <h3>设备列表</h3>-->
<!--        <div class="table-actions flex-center">-->
<!--          &lt;!&ndash; 部件状态筛选 &ndash;&gt;-->
<!--          <el-select-->
<!--              v-model="partStatusFilter"-->
<!--              placeholder="部件状态筛选"-->
<!--              @change="handleFilter"-->
<!--              class="mr-10"-->
<!--          >-->
<!--            <el-option label="全部状态" value=""></el-option>-->
<!--            <el-option label="正常" value="正常"></el-option>-->
<!--            <el-option label="故障" value="故障"></el-option>-->
<!--            <el-option label="待更换" value="待更换"></el-option>-->
<!--          </el-select>-->
<!--          &lt;!&ndash; 导出数据按钮 &ndash;&gt;-->
<!--          <el-button icon="el-icon-download" size="mini" @click="exportDeviceData">-->
<!--            导出数据-->
<!--          </el-button>-->
<!--        </div>-->
<!--      </div>-->

    <!-- 上半部分：机器列表（原设备列表调整） -->
    <el-card class="machine-table mb-20" shadow="hover">
      <div slot="header" class="flex-between">
        <h3>机器列表</h3>
        <div class="table-actions flex-center">
          <!-- 保留导出按钮 -->
          <el-button icon="el-icon-download" size="mini" @click="exportDeviceData">
            导出数据
          </el-button>
        </div>
      </div>

      <!-- 设备表格：支持展开查看部件列表 -->
<!--      <el-table-->
<!--          :data="filteredDevices"-->
<!--          stripe-->
<!--          style="width: 100%"-->
<!--          v-loading="tableLoading"-->
<!--          :cell-style="cellStyle"-->
<!--          :header-cell-style="headerCellStyle"-->
<!--          highlight-current-row-->
<!--          :expand-row-keys="expandedRowKeys"-->
<!--          @expand-change="handleExpandChange"-->
<!--      >-->

      <!-- 机器表格：移除"设备运行参数"列 -->
      <el-table
          :data="filteredDevices"
          stripe
          style="width: 100%"
          v-loading="tableLoading"
          :cell-style="cellStyle"
          :header-cell-style="headerCellStyle"
          highlight-current-row
          :expand-row-keys="expandedRowKeys"
          @expand-change="handleExpandChange"
      >

        <!-- 展开列 （用于查看单台机器的部件）-->
        <el-table-column type="expand">
          <template slot-scope="scope">
            <!-- 展开行：显示当前设备的所有部件详情 -->
            <el-table
                :data="scope.row.parts"
                border
                style="width: 100%; margin-top: 10px"
            >
              <el-table-column prop="partId" label="部件ID" width="120"></el-table-column>
              <el-table-column prop="partName" label="部件名称" width="140"></el-table-column>
              <el-table-column prop="partStatus" label="部件状态" width="100">
                <template slot-scope="partScope">
                  <el-tag :type="getPartTagType(partScope.row.partStatus)">
                    {{ partScope.row.partStatus }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="partPurchaseDate" label="部件购入时间" width="160"></el-table-column>
              <el-table-column prop="workUnit" label="工作属性单位" width="120"></el-table-column>
              <el-table-column label="正常工作范围" width="200">
                <template slot-scope="partScope">
                  {{ partScope.row.normalMin }} - {{ partScope.row.normalMax }} {{ partScope.row.workUnit }}
                </template>
              </el-table-column>
              <el-table-column prop="partWorkProp" label="部件工作属性" width="140"></el-table-column>
              <el-table-column label="操作" width="120" align="center">
                <template slot-scope="partScope">
                  <el-button size="mini" type="text" @click="editPartOfMa(scope.row, partScope.row)">编辑</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>

        <!-- 设备基础信息列  ×  -->
<!--        机器列表列（移除operationParams）-->
        <el-table-column type="index" label="序号" width="60"></el-table-column>
        <el-table-column prop="machineId" label="机器编号" width="120"></el-table-column>
        <el-table-column prop="machineName" label="机器名称" width="140"></el-table-column>
        <el-table-column prop="machineStatus" label="机器状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="getDeviceTagType(scope.row.machineStatus)">
              {{ scope.row.machineStatus }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="machinePurchaseDate" label="机器购入时间" width="160"></el-table-column>
        <el-table-column prop="power" label="功率" width="100">
          <template slot-scope="scope">{{ scope.row.power }} kW</template>
        </el-table-column>
<!--        <el-table-column prop="operationParams" label="设备运行参数" width="180"></el-table-column>-->
        <el-table-column label="部件数量" width="100" align="center">
          <template slot-scope="scope">{{ scope.row.parts.length }} 个</template>
        </el-table-column>
        <!-- 操作列 -->
        <el-table-column label="操作" width="220" align="center">
          <template slot-scope="scope">
            <div class="btn-container">
              <el-button size="mini" type="primary" @click="viewDeviceDetail(scope.row)" class="table-btn">查看</el-button>
              <el-button size="mini" type="success" @click="editDevice(scope.row)" class="table-btn">编辑</el-button>
              <el-button size="mini" type="danger" @click="deleteDevice(scope.row)" class="table-btn">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 机器列表分页控件 -->
      <div class="pagination-container mt-15">
        <el-pagination
            background
            layout="total, prev, pager, next, sizes"
            :total="filteredDevices.length"
            :page-sizes="[10, 20, 50]"
            :page-size="pageSize"
            :current-page="currentPage"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </el-card>

    <!-- 下半部分：部件列表（新增） -->
    <el-card class="part-table" shadow="hover">
      <div slot="header" class="flex-between">
        <h3>部件列表</h3>
        <div class="table-actions flex-center">
          <!-- 部件状态筛选器 -->
          <el-select
              v-model="partStatusFilter"
              placeholder="部件状态筛选"
              @change="handleFilter"
              class="mr-10"
          >
            <el-option label="全部状态" value=""></el-option>
            <el-option label="正常" value="正常"></el-option>
            <el-option label="故障" value="故障"></el-option>
            <el-option label="待更换" value="待更换"></el-option>
          </el-select>
          <el-button icon="el-icon-download" size="mini" @click="exportPartData">
            导出部件数据
          </el-button>
        </div>
      </div>

      <!-- 部件表格：按需求展示列 -->
      <el-table
          :data="filteredParts"
          stripe
          style="width: 100%"
          v-loading="partTableLoading"
          :cell-style="cellStyle"
          :header-cell-style="headerCellStyle"
      >
        <el-table-column type="index" label="序号" width="60"></el-table-column>
        <el-table-column prop="partId" label="部件编号" width="120"></el-table-column>
        <el-table-column prop="partName" label="部件名称" width="140"></el-table-column>
        <el-table-column prop="partStatus" label="部件状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="getPartTagType(scope.row.partStatus)">
              {{ scope.row.partStatus }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="partPurchaseDate" label="购入时间" width="160"></el-table-column>
        <el-table-column prop="partWorkProp" label="部件工作属性" width="140"></el-table-column>
        <el-table-column prop="workUnit" label="工作属性单位" width="120"></el-table-column>
        <el-table-column prop="normalMin" label="工作范围最小值" width="140"></el-table-column>
        <el-table-column prop="normalMax" label="工作范围最大值" width="140"></el-table-column>
        <el-table-column prop="actualParam" label="实际运行参数" width="140">
          <!-- 实际运行参数使用部件工作属性 -->
          <template slot-scope="scope">{{ scope.row.partWorkProp }}</template>
        </el-table-column>
        <el-table-column prop="machineId" label="所属机器编号" width="140"></el-table-column>
        <el-table-column label="操作" width="80" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="editPartOfCom(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 部件列表分页 -->
      <div class="pagination-container mt-15">
        <el-pagination
            background
            layout="total, prev, pager, next, sizes"
            :total="filteredParts.length"
            :page-sizes="[10, 20, 50]"
            :page-size="partPageSize"
            :current-page="partCurrentPage"
            @size-change="handlePartSizeChange"
            @current-change="handlePartCurrentChange"
        ></el-pagination>
      </div>
    </el-card>

    <!-- 1. 新增/编辑设备对话框 -->
    <el-dialog
        :title="isEdit ? '编辑设备' : '新增设备'"
        :visible.sync="deviceDialogVisible"
        width="800px"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        :append-to-body="true"
    >
      <el-form :model="deviceForm" :rules="deviceRules" ref="deviceFormRef" label-width="140px">
        <!-- 设备基础信息 -->
        <el-form-item label="设备类型" prop="deviceType">
          <el-select v-model="deviceForm.deviceType" placeholder="请选择设备类型" @change="handleDeviceTypeChange">
            <el-option label="摊青机器" value="T"></el-option>
            <el-option label="杀青机器" value="S"></el-option>
            <el-option label="揉捻机器" value="R"></el-option>
            <el-option label="炒青机器" value="C"></el-option>
            <el-option label="烘青机器" value="H"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="机器编号" prop="machineId" v-if="isEdit">
          <el-input v-model="deviceForm.machineId" disabled placeholder="自动生成"></el-input>
        </el-form-item>
        <el-form-item label="机器名称" prop="machineName">
          <el-input v-model="deviceForm.machineName" placeholder="例如：摊青机-01"></el-input>
        </el-form-item>
        <el-form-item label="机器状态" prop="machineStatus">
          <el-select v-model="deviceForm.machineStatus" placeholder="请选择设备状态">
            <el-option label="运行中" value="运行中"></el-option>
            <el-option label="故障" value="故障"></el-option>
            <el-option label="待机" value="待机"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="机器购入时间" prop="machinePurchaseDate">
          <el-date-picker
              v-model="deviceForm.machinePurchaseDate"
              type="date"
              placeholder="选择购入日期"
              value-format="YYYY-MM-DD"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="功率(kW)" prop="power">
          <el-input v-model.number="deviceForm.power" placeholder="输入设备功率（数值）"></el-input>
        </el-form-item>
        <el-form-item label="设备运行参数" prop="operationParams">
          <el-input v-model="deviceForm.operationParams" placeholder="例如：温度25℃，湿度60%"></el-input>
        </el-form-item>

        <!-- 设备部件列表（动态生成） -->
        <el-form-item label="部件列表" class="mt-10">
          <div class="flex-between mb-10">
            <span class="text-primary">根据设备类型自动生成默认部件，可手动调整</span>
            <el-button size="mini" type="primary" @click="addPart">+ 新增部件</el-button>
          </div>
          <el-table
              :data="deviceForm.parts"
              border
              style="width: 100%"
              :cell-style="{ 'padding': '8px 0' }"
          >
            <el-table-column prop="partId" label="部件ID" width="120">
              <template slot-scope="scope">
                <el-input v-model="scope.row.partId" size="mini" placeholder="输入部件ID"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="partName" label="部件名称" width="140">
              <template slot-scope="scope">
                <el-select v-model="scope.row.partName" size="mini" placeholder="选择部件">
                  <el-option label="温度传感器(TS)" value="温度传感器(TS)"></el-option>
                  <el-option label="加热装置(HD)" value="加热装置(HD)"></el-option>
                  <el-option label="湿度传感器(HS)" value="湿度传感器(HS)"></el-option>
                  <el-option label="排气扇(EF)" value="排气扇(EF)"></el-option>
                  <el-option label="加湿器(HF)" value="加湿器(HF)"></el-option>
                  <el-option label="红外水分传感器(MS)" value="红外水分传感器(MS)"></el-option>
                  <el-option label="传送带(CB)" value="传送带(CB)"></el-option>
                  <el-option label="翻料装置(TD)" value="翻料装置(TD)"></el-option>
                  <el-option label="可调挡板(AB)" value="可调挡板(AB)"></el-option>
                  <el-option label="电子称重装置(EW)" value="电子称重装置(EW)"></el-option>
                  <el-option label="揉捻转子(KR)" value="揉捻转子(KR)"></el-option>
                  <el-option label="加压装置(PD)" value="加压装置(PD)"></el-option>
                  <el-option label="高光谱成像监控(IM)" value="高光谱成像监控(IM)"></el-option>
                  <el-option label="摊晾挡板(AB)" value="摊晾挡板(AB)"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="partStatus" label="部件状态" width="100">
              <template slot-scope="scope">
                <el-select v-model="scope.row.partStatus" size="mini">
                  <el-option label="正常" value="正常"></el-option>
                  <el-option label="故障" value="故障"></el-option>
                  <el-option label="待更换" value="待更换"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="partPurchaseDate" label="部件购入时间" width="160">
              <template slot-scope="scope">
                <el-date-picker
                    v-model="scope.row.partPurchaseDate"
                    type="date"
                    size="mini"
                    placeholder="选择日期"
                    value-format="YYYY-MM-DD"
                ></el-date-picker>
              </template>
            </el-table-column>
            <el-table-column prop="workUnit" label="工作属性单位" width="120">
              <template slot-scope="scope">
                <el-input v-model="scope.row.workUnit" size="mini" placeholder="例如：℃、kW"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="normalMin" label="正常范围最小值" width="120">
              <template slot-scope="scope">
                <el-input v-model.number="scope.row.normalMin" size="mini" placeholder="数值"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="normalMax" label="正常范围最大值" width="120">
              <template slot-scope="scope">
                <el-input v-model.number="scope.row.normalMax" size="mini" placeholder="数值"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="partWorkProp" label="部件工作属性" width="140">
              <template slot-scope="scope">
                <el-input v-model="scope.row.partWorkProp" size="mini" placeholder="例如：25℃"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="80" align="center">
              <template slot-scope="scope">
                <el-button size="mini" type="text" color="#F56C6C" @click="deletePart(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>

      <!-- 对话框底部按钮 -->
      <div slot="footer">
        <el-button @click="deviceDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitDeviceForm">确定</el-button>
      </div>
    </el-dialog>

    <!-- 2. 设备详情对话框 -->
    <el-dialog
        title="设备详情"
        :visible.sync="detailVisible"
        width="900px"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        :append-to-body="true"
    >
      <!-- 设备基础信息头部 -->
      <div class="detail-header flex-center mb-20">
        <el-avatar :size="100" class="detail-avatar">
          <span>{{ selectedDevice.machineName ? selectedDevice.machineName.charAt(0) : '' }}</span>
        </el-avatar>
        <div class="detail-header-info ml-20">
          <h3 class="detail-name text-2xl font-bold">{{ selectedDevice.machineName }}</h3>
          <p class="detail-id mt-5">设备编号：{{ selectedDevice.machineId }}</p>
          <div class="flex-center mt-5">
            <el-tag :type="getDeviceTagType(selectedDevice.machineStatus)" class="mr-10">
              {{ selectedDevice.machineStatus }}
            </el-tag>
            <span class="text-gray-500">购入时间：{{ selectedDevice.machinePurchaseDate }}</span>
          </div>
        </div>
      </div>

      <!-- 设备基础信息描述 -->
      <el-descriptions column="3" border class="mb-20" :cell-style="{ 'padding': '12px' }">
        <el-descriptions-item label="设备类型">{{ getDeviceTypeName(selectedDevice.deviceType) }}</el-descriptions-item>
        <el-descriptions-item label="功率">{{ selectedDevice.power }} kW</el-descriptions-item>
        <el-descriptions-item label="设备运行参数">{{ selectedDevice.operationParams }}</el-descriptions-item>
        <el-descriptions-item label="部件总数">{{ selectedDevice.parts ? selectedDevice.parts.length : 0 }} 个</el-descriptions-item>
        <el-descriptions-item label="正常部件数">{{ getNormalPartCount() }} 个</el-descriptions-item>
        <el-descriptions-item label="故障部件数">{{ getFaultPartCount() }} 个</el-descriptions-item>
      </el-descriptions>

      <!-- 部件详情表格 -->
      <h3 class="detail-title mb-10 font-medium">部件详情列表</h3>
      <el-table
          :data="selectedDevice.parts"
          stripe
          border
          style="width: 100%"
          :header-cell-style="{ 'background-color': '#f0f9e8', 'color': '#2e7d32' }"
      >
        <el-table-column prop="partId" label="部件ID" width="120"></el-table-column>
        <el-table-column prop="partName" label="部件名称" width="140"></el-table-column>
        <el-table-column prop="partStatus" label="部件状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="getPartTagType(scope.row.partStatus)">
              {{ scope.row.partStatus }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="partPurchaseDate" label="部件购入时间" width="160"></el-table-column>
        <el-table-column prop="workUnit" label="工作属性单位" width="120"></el-table-column>
        <el-table-column label="正常工作范围" width="200">
          <template slot-scope="scope">
            {{ scope.row.normalMin }} - {{ scope.row.normalMax }} {{ scope.row.workUnit }}
          </template>
        </el-table-column>
        <el-table-column prop="partWorkProp" label="部件工作属性" width="140"></el-table-column>
      </el-table>

      <!-- 对话框底部按钮 -->
      <div slot="footer">
        <el-button @click="detailVisible = false">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 3. 编辑部件对话框 -->
    <el-dialog
        title="编辑部件"
        :visible.sync="partDialogVisible"
        width="600px"
        :close-on-click-modal="false"
    >
      <el-form :model="partForm" :rules="partRules" ref="partFormRef" label-width="140px">
        <el-form-item label="部件ID" prop="partId">
          <el-input v-model="partForm.partId" placeholder="输入部件ID"></el-input>
        </el-form-item>
        <el-form-item label="部件名称" prop="partName">
          <el-select v-model="partForm.partName" placeholder="选择部件">
            <el-option label="温度传感器(TS)" value="温度传感器(TS)"></el-option>
            <el-option label="加热装置(HD)" value="加热装置(HD)"></el-option>
            <el-option label="湿度传感器(HS)" value="湿度传感器(HS)"></el-option>
            <el-option label="排气扇(EF)" value="排气扇(EF)"></el-option>
            <el-option label="加湿器(HF)" value="加湿器(HF)"></el-option>
            <el-option label="红外水分传感器(MS)" value="红外水分传感器(MS)"></el-option>
            <el-option label="传送带(CB)" value="传送带(CB)"></el-option>
            <el-option label="翻料装置(TD)" value="翻料装置(TD)"></el-option>
            <el-option label="可调挡板(AB)" value="可调挡板(AB)"></el-option>
            <el-option label="电子称重装置(EW)" value="电子称重装置(EW)"></el-option>
            <el-option label="揉捻转子(KR)" value="揉捻转子(KR)"></el-option>
            <el-option label="加压装置(PD)" value="加压装置(PD)"></el-option>
            <el-option label="高光谱成像监控(IM)" value="高光谱成像监控(IM)"></el-option>
            <el-option label="摊晾挡板(AB)" value="摊晾挡板(AB)"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部件状态" prop="partStatus">
          <el-select v-model="partForm.partStatus" placeholder="选择部件状态">
            <el-option label="正常" value="正常"></el-option>
            <el-option label="故障" value="故障"></el-option>
            <el-option label="待更换" value="待更换"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部件工作属性" prop="partWorkProp">
          <el-input v-model="partForm.partWorkProp" placeholder="例如：25℃"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="partDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitPartForm">确定</el-button>
      </div>
    </el-dialog>
  </main-layout>
</template>

<script>
import MainLayout from '../../components/layout/MainLayout.vue';
import axios from "axios";

export default {
  components: { MainLayout },
  data() {
    return {
      // 顶部导航信息
      username: '管理员',
      unreadCount: 3,

      // 筛选条件
      searchQuery: '',
      deviceTypeFilter: '',
      deviceStatusFilter: '',
      partStatusFilter: '',

      // 新增部件列表分页参数
      partPageSize: 10,
      partCurrentPage: 1,
      partTableLoading: false,

      // 表格数据与分页
      devices: [
        // 初始化摊青机器数据（示例）
        {
          machineId: 'T001',
          machineName: '摊青机-01',
          deviceType: 'T',
          machineStatus: '运行中',
          machinePurchaseDate: '2023-01-15',
          power: 8.5,
          operationParams: '温度25-30℃，湿度55-65%',
          parts: [
            {
              partId: 'TS-T001',
              partName: '温度传感器(TS)',
              partStatus: '正常',
              partPurchaseDate: '2023-01-15',
              workUnit: '℃',
              normalMin: 20,
              normalMax: 35,
              partWorkProp: '28℃'
            },
            {
              partId: 'HD-T001',
              partName: '加热装置(HD)',
              partStatus: '正常',
              partPurchaseDate: '2023-01-15',
              workUnit: 'kW',
              normalMin: 3,
              normalMax: 6,
              partWorkProp: '4.5kW'
            },
            {
              partId: 'HS-T001',
              partName: '湿度传感器(HS)',
              partStatus: '正常',
              partPurchaseDate: '2023-01-15',
              workUnit: '%',
              normalMin: 50,
              normalMax: 70,
              partWorkProp: '62%'
            }
          ]
        },
        // 初始化杀青机器数据（示例）
        {
          machineId: 'S001',
          machineName: '杀青机-01',
          deviceType: 'S',
          machineStatus: '待机',
          machinePurchaseDate: '2023-03-20',
          power: 12,
          operationParams: '温度180-220℃，转速15r/min',
          parts: [
            {
              partId: 'TS-S001',
              partName: '温度传感器(TS)',
              partStatus: '正常',
              partPurchaseDate: '2023-03-20',
              workUnit: '℃',
              normalMin: 150,
              normalMax: 250,
              partWorkProp: '200℃'
            },
            {
              partId: 'HD-S001',
              partName: '加热装置(HD)',
              partStatus: '故障',
              partPurchaseDate: '2023-03-20',
              workUnit: 'kW',
              normalMin: 8,
              normalMax: 15,
              partWorkProp: '10kW（故障）'
            },
            {
              partId: 'CB-S001',
              partName: '传送带(CB)',
              partStatus: '正常',
              partPurchaseDate: '2023-03-20',
              workUnit: 'r/min',
              normalMin: 10,
              normalMax: 20,
              partWorkProp: '15r/min'
            }
          ]
        }
      ],
      filteredDevices: [],
      tableLoading: false,
      pageSize: 10,
      currentPage: 1,
      expandedRowKeys: [], // 表格展开行ID

      // 对话框控制
      deviceDialogVisible: false,
      detailVisible: false,
      partDialogVisible: false,
      isEdit: false,

      // 表单数据
      deviceForm: {
        // deviceType: '',
        // machineId: '',
        // machineName: '',
        // machineStatus: '待机',
        // machinePurchaseDate: '',
        // power: '',
        // operationParams: '',
        // parts: [] // 部件列表
        filtrateCondition: '',
        filtrateValue:''
      },
      partForm: {
        partId: '',
        partName: '',
        partStatus: '正常',
        partWorkProp: ''
      },
      selectedDevice: {}, // 当前选中的设备
      currentDevice: {}, // 当前编辑的设备（用于部件编辑）

      // 表单校验规则
      deviceRules: {
        deviceType: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
        machineName: [{ required: true, message: '请输入机器名称', trigger: 'blur' }, { min: 3, max: 20, message: '名称长度3-20字符', trigger: 'blur' }],
        machineStatus: [{ required: true, message: '请选择机器状态', trigger: 'change' }],
        machinePurchaseDate: [{ required: true, message: '请选择机器购入时间', trigger: 'change' }],
        power: [{ required: true, message: '请输入功率', trigger: 'blur' }, { type: 'number', min: 0.1, message: '功率需大于0', trigger: 'blur' }],
        operationParams: [{ required: true, message: '请输入设备运行参数', trigger: 'blur' }]
      },
      partRules: {
        partId: [{ required: true, message: '请输入部件ID', trigger: 'blur' }],
        partName: [{ required: true, message: '请选择部件名称', trigger: 'change' }],
        partStatus: [{ required: true, message: '请选择部件状态', trigger: 'change' }],
        partWorkProp: [{ required: true, message: '请输入部件工作属性', trigger: 'blur' }]
      }
    };
  },

  computed: {
    // 计算属性：提取所有机器的部件并关联机器编号
    allParts() {
      return this.filteredDevices.flatMap(device =>
          device.parts.map(part => ({
            ...part,
            machineId: device.machineId, // 关联所属机器编号
            actualParam: part.partWorkProp // 实际运行参数映射
          }))
      );
    },
    // 筛选后的部件列表（受部件状态筛选影响）
    filteredParts() {
      return this.allParts.filter(part =>
          !this.partStatusFilter || part.partStatus === this.partStatusFilter
      );
    }
  },

  mounted() {
    // 初始化筛选设备列表
    this.filterDevices();
  },
  methods: {
    // ---------------------- 表格样式方法 ----------------------
    cellStyle() {
      return { 'font-size': '14px', 'padding': '12px 0' };
    },
    headerCellStyle() {
      return { 'background-color': '#f0f9e8', 'color': '#2e7d32', 'font-weight': '500', 'padding': '12px 0' };
    },

    // ---------------------- 筛选与搜索方法 ----------------------
    handleSearch() {
      this.filterDevices();
    },
    handleFilter() {
      this.filterDevices();
    },
    filterDevices() {
      this.tableLoading = true;
      // 模拟接口请求延迟
      setTimeout(() => {
        this.filteredDevices = this.devices.filter(device => {
          // 搜索匹配：设备编号/名称/部件ID
          const searchMatch = !this.searchQuery
              ? true
              : device.machineId.includes(this.searchQuery)
              || device.machineName.includes(this.searchQuery)
              || device.parts.some(part => part.partId.includes(this.searchQuery));

          // 设备类型匹配
          const typeMatch = !this.deviceTypeFilter || device.deviceType === this.deviceTypeFilter;

          // 设备状态匹配
          const deviceStatusMatch = !this.deviceStatusFilter || device.machineStatus === this.deviceStatusFilter;

          // 部件状态匹配（只要有一个部件符合即匹配）
          const partStatusMatch = !this.partStatusFilter
              ? true
              : device.parts.some(part => part.partStatus === this.partStatusFilter);

          return searchMatch && typeMatch && deviceStatusMatch && partStatusMatch;
        });
        this.tableLoading = false;
      }, 300);
    },

    // ---------------------- 分页方法 ----------------------
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    handleExpandChange(row, expanded) {
      if (expanded) {
        this.expandedRowKeys = [row.machineId];
      } else {
        this.expandedRowKeys = [];
      }
    },

    // ---------------------- 设备类型与标签方法 ----------------------
    // 根据设备类型获取默认部件列表（核心：匹配需求中的设备-部件关联）
    getDefaultPartsByType(deviceType) {
      const partMap = {
        // 摊青机器(T)
        T: [
          { partId: `TS-${deviceType}${Date.now().toString().slice(-4)}`, partName: '温度传感器(TS)', partStatus: '正常', partPurchaseDate: '', workUnit: '℃', normalMin: 20, normalMax: 35, partWorkProp: '' },
          { partId: `HD-${deviceType}${Date.now().toString().slice(-4)}`, partName: '加热装置(HD)', partStatus: '正常', partPurchaseDate: '', workUnit: 'kW', normalMin: 3, normalMax: 6, partWorkProp: '' },
          { partId: `HS-${deviceType}${Date.now().toString().slice(-4)}`, partName: '湿度传感器(HS)', partStatus: '正常', partPurchaseDate: '', workUnit: '%', normalMin: 50, normalMax: 70, partWorkProp: '' },
          { partId: `EF-${deviceType}${Date.now().toString().slice(-4)}`, partName: '排气扇(EF)', partStatus: '正常', partPurchaseDate: '', workUnit: 'r/min', normalMin: 800, normalMax: 1200, partWorkProp: '' },
          { partId: `HF-${deviceType}${Date.now().toString().slice(-4)}`, partName: '加湿器(HF)', partStatus: '正常', partPurchaseDate: '', workUnit: 'L/h', normalMin: 0.5, normalMax: 2, partWorkProp: '' },
          { partId: `MS-${deviceType}${Date.now().toString().slice(-4)}`, partName: '红外水分传感器(MS)', partStatus: '正常', partPurchaseDate: '', workUnit: '%', normalMin: 10, normalMax: 40, partWorkProp: '' },
          { partId: `CB-${deviceType}${Date.now().toString().slice(-4)}`, partName: '传送带(CB)', partStatus: '正常', partPurchaseDate: '', workUnit: 'm/min', normalMin: 0.5, normalMax: 1.5, partWorkProp: '' },
          { partId: `TD-${deviceType}${Date.now().toString().slice(-4)}`, partName: '翻料装置(TD)', partStatus: '正常', partPurchaseDate: '', workUnit: '次/min', normalMin: 5, normalMax: 15, partWorkProp: '' },
          { partId: `AB-${deviceType}${Date.now().toString().slice(-4)}`, partName: '可调挡板(AB)', partStatus: '正常', partPurchaseDate: '', workUnit: '°', normalMin: 0, normalMax: 90, partWorkProp: '' }
        ],
        // 杀青机器(S)
        S: [
          { partId: `TS-${deviceType}${Date.now().toString().slice(-4)}`, partName: '温度传感器(TS)', partStatus: '正常', partPurchaseDate: '', workUnit: '℃', normalMin: 150, normalMax: 250, partWorkProp: '' },
          { partId: `HD-${deviceType}${Date.now().toString().slice(-4)}`, partName: '加热装置(HD)', partStatus: '正常', partPurchaseDate: '', workUnit: 'kW', normalMin: 8, normalMax: 15, partWorkProp: '' },
          { partId: `CB-${deviceType}${Date.now().toString().slice(-4)}`, partName: '传送带(CB)', partStatus: '正常', partPurchaseDate: '', workUnit: 'm/min', normalMin: 0.3, normalMax: 1, partWorkProp: '' },
          { partId: `EW-${deviceType}${Date.now().toString().slice(-4)}`, partName: '电子称重装置(EW)', partStatus: '正常', partPurchaseDate: '', workUnit: 'kg', normalMin: 0, normalMax: 50, partWorkProp: '' }
        ],
        // 揉捻机器(R)
        R: [
          { partId: `EW-${deviceType}${Date.now().toString().slice(-4)}`, partName: '电子称重装置(EW)', partStatus: '正常', partPurchaseDate: '', workUnit: 'kg', normalMin: 0, normalMax: 100, partWorkProp: '' },
          { partId: `TS-${deviceType}${Date.now().toString().slice(-4)}`, partName: '温度传感器(TS)', partStatus: '正常', partPurchaseDate: '', workUnit: '℃', normalMin: 20, normalMax: 40, partWorkProp: '' },
          { partId: `HD-${deviceType}${Date.now().toString().slice(-4)}`, partName: '加热装置(HD)', partStatus: '正常', partPurchaseDate: '', workUnit: 'kW', normalMin: 5, normalMax: 10, partWorkProp: '' },
          { partId: `KR-${deviceType}${Date.now().toString().slice(-4)}`, partName: '揉捻转子(KR)', partStatus: '正常', partPurchaseDate: '', workUnit: 'r/min', normalMin: 20, normalMax: 50, partWorkProp: '' },
          { partId: `PD-${deviceType}${Date.now().toString().slice(-4)}`, partName: '加压装置(PD)', partStatus: '正常', partPurchaseDate: '', workUnit: 'MPa', normalMin: 0.1, normalMax: 0.5, partWorkProp: '' },
          { partId: `CB-${deviceType}${Date.now().toString().slice(-4)}`, partName: '传送带(CB)', partStatus: '正常', partPurchaseDate: '', workUnit: 'm/min', normalMin: 0.2, normalMax: 0.8, partWorkProp: '' },
          { partId: `MS-${deviceType}${Date.now().toString().slice(-4)}`, partName: '红外水分传感器(MS)', partStatus: '正常', partPurchaseDate: '', workUnit: '%', normalMin: 10, normalMax: 40, partWorkProp: '' }
        ],
        // 炒青机器(C)
        C: [
          { partId: `EF-${deviceType}${Date.now().toString().slice(-4)}`, partName: '排气扇(EF)', partStatus: '正常', partPurchaseDate: '', workUnit: 'r/min', normalMin: 1000, normalMax: 1500, partWorkProp: '' },
          { partId: `CB-${deviceType}${Date.now().toString().slice(-4)}`, partName: '传送带(CB)', partStatus: '正常', partPurchaseDate: '', workUnit: 'm/min', normalMin: 0.4, normalMax: 1.2, partWorkProp: '' },
          { partId: `HD-${deviceType}${Date.now().toString().slice(-4)}`, partName: '加热装置(HD)', partStatus: '正常', partPurchaseDate: '', workUnit: 'kW', normalMin: 10, normalMax: 20, partWorkProp: '' },
          { partId: `TS-${deviceType}${Date.now().toString().slice(-4)}`, partName: '温度传感器(TS)', partStatus: '正常', partPurchaseDate: '', workUnit: '℃', normalMin: 180, normalMax: 250, partWorkProp: '' },
          { partId: `IM-${deviceType}${Date.now().toString().slice(-4)}`, partName: '高光谱成像监控(IM)', partStatus: '正常', partPurchaseDate: '', workUnit: '帧/s', normalMin: 15, normalMax: 30, partWorkProp: '' },
          { partId: `AB-${deviceType}${Date.now().toString().slice(-4)}`, partName: '摊晾挡板(AB)', partStatus: '正常', partPurchaseDate: '', workUnit: '°', normalMin: 0, normalMax: 90, partWorkProp: '' },
          { partId: `EW-${deviceType}${Date.now().toString().slice(-4)}`, partName: '电子称重装置(EW)', partStatus: '正常', partPurchaseDate: '', workUnit: 'kg', normalMin: 0, normalMax: 80, partWorkProp: '' },
          { partId: `MS-${deviceType}${Date.now().toString().slice(-4)}`, partName: '红外水分传感器(MS)', partStatus: '正常', partPurchaseDate: '', workUnit: '%', normalMin: 10, normalMax: 40, partWorkProp: '' }
        ],
        // 烘青机器(H)
        H: [
          { partId: `EF-${deviceType}${Date.now().toString().slice(-4)}`, partName: '排气扇(EF)', partStatus: '正常', partPurchaseDate: '', workUnit: 'r/min', normalMin: 900, normalMax: 1400, partWorkProp: '' },
          { partId: `CB-${deviceType}${Date.now().toString().slice(-4)}`, partName: '传送带(CB)', partStatus: '正常', partPurchaseDate: '', workUnit: 'm/min', normalMin: 0.3, normalMax: 1, partWorkProp: '' },
          { partId: `HD-${deviceType}${Date.now().toString().slice(-4)}`, partName: '加热装置(HD)', partStatus: '正常', partPurchaseDate: '', workUnit: 'kW', normalMin: 12, normalMax: 25, partWorkProp: '' },
          { partId: `TS-${deviceType}${Date.now().toString().slice(-4)}`, partName: '温度传感器(TS)', partStatus: '正常', partPurchaseDate: '', workUnit: '℃', normalMin: 60, normalMax: 120, partWorkProp: '' },
          { partId: `AB-${deviceType}${Date.now().toString().slice(-4)}`, partName: '摊晾挡板(AB)', partStatus: '正常', partPurchaseDate: '', workUnit: '°', normalMin: 0, normalMax: 90, partWorkProp: '' },
          { partId: `EW-${deviceType}${Date.now().toString().slice(-4)}`, partName: '电子称重装置(EW)', partStatus: '正常', partPurchaseDate: '', workUnit: 'kg', normalMin: 0, normalMax: 100, partWorkProp: '' },
          { partId: `MS-${deviceType}${Date.now().toString().slice(-4)}`, partName: '红外水分传感器(MS)', partStatus: '正常', partPurchaseDate: '', workUnit: '%', normalMin: 5, normalMax: 20, partWorkProp: '' }
        ]
      };
      return partMap[deviceType] || [];
    },
    // 根据设备类型获取设备名称
    getDeviceTypeName(deviceType) {
      const typeMap = { T: '摊青机器', S: '杀青机器', R: '揉捻机器', C: '炒青机器', H: '烘青机器' };
      return typeMap[deviceType] || '未知类型';
    },
    // 获取设备状态标签类型
    getDeviceTagType(status) {
      const tagMap = { '运行中': 'success', '故障': 'danger', '待机': 'warning' };
      return tagMap[status] || 'info';
    },
    // 获取部件状态标签类型
    getPartTagType(status) {
      const tagMap = { '正常': 'success', '故障': 'danger', '待更换': 'warning' };
      return tagMap[status] || 'info';
    },

    // ---------------------- 设备操作方法 ----------------------
    // 新增设备
    handleAddDevice() {
      this.isEdit = false;
      this.deviceForm = {
        deviceType: '',
        machineId: '',
        machineName: '',
        machineStatus: '待机',
        machinePurchaseDate: '',
        power: '',
        operationParams: '',
        parts: []
      };
      this.deviceDialogVisible = true;
    },
    // 编辑设备
    editDevice(row) {
      this.isEdit = true;
      this.deviceForm = { ...row };
      // 深拷贝部件列表（避免引用修改）
      this.deviceForm.parts = JSON.parse(JSON.stringify(row.parts));
      this.deviceDialogVisible = true;
    },
    // 删除设备
    deleteDevice(row) {
      this.$confirm(`确定要删除设备「${row.machineName}（${row.machineId}）」吗？删除后不可恢复！`, '警告', {
        type: 'warning'
      }).then(() => {
        const index = this.devices.findIndex(item => item.machineId === row.machineId);
        if (index !== -1) {
          this.devices.splice(index, 1);
          this.filterDevices();
          this.$message.success('设备删除成功！');
        }
      }).catch(() => {
        this.$message.info('已取消删除操作');
      });
    },
    // 查看设备详情
    viewDeviceDetail(row) {
      this.selectedDevice = { ...row };
      this.detailVisible = true;
    },
    // 设备类型变更：自动生成默认部件
    handleDeviceTypeChange(val) {
      if (val) {
        this.deviceForm.parts = this.getDefaultPartsByType(val);
        // 自动生成设备编号（类型+时间戳后4位）
        if (!this.isEdit) {
          this.deviceForm.machineId = `${val}${Date.now().toString().slice(-6)}`;
        }
      } else {
        this.deviceForm.parts = [];
      }
    },

    // ---------------------- 部件操作方法 ----------------------
    // 新增部件
    addPart() {
      this.deviceForm.parts.push({
        partId: `PART-${Date.now().toString().slice(-6)}`,
        partName: '',
        partStatus: '正常',
        partPurchaseDate: '',
        workUnit: '',
        normalMin: '',
        normalMax: '',
        partWorkProp: ''
      });
    },
    // 删除部件
    deletePart(index) {
      this.deviceForm.parts.splice(index, 1);
    },
    // 编辑部件
    editPartOfMa(device, part) {
      this.currentDevice = device;
      this.partForm = { ...part };
      this.partDialogVisible = true;
    },

    // ---------------------- 表单提交方法 ----------------------
    // 提交设备表单（新增/编辑）
    submitDeviceForm() {
      this.$refs.deviceFormRef.validate((valid) => {
        if (valid) {
          // 构造提交数据
          const submitData = {
            viewName: 'device',
            operation: this.isEdit ? 'device_update' : 'device_insert',
            opType: this.isEdit ? 3 : 1,
            data: this.deviceForm
          };

          // 发送接口请求
          axios({
            method: 'post',
            url: '/teaSystem/TeaProcessingServlet',
            headers: { 'Content-Type': 'application/json' },
            data: submitData
          }).then(res => {
            if (res.status === 200) {
              // 更新本地数据
              if (this.isEdit) {
                // 编辑：替换原有设备
                const index = this.devices.findIndex(item => item.machineId === this.deviceForm.machineId);
                if (index !== -1) {
                  this.devices[index] = { ...this.deviceForm };
                }
                this.$message.success('设备编辑成功！');
              } else {
                // 新增：添加到设备列表
                this.devices.push({ ...this.deviceForm });
                this.$message.success('设备新增成功！');
              }

              // 关闭对话框并刷新列表
              this.deviceDialogVisible = false;
              this.filterDevices();
            }
          }).catch(error => {
            this.$message.error(`请求失败：${error.response?.data?.message || error.message}`);
          });
        }
      });
    },
    // 提交部件表单（编辑）
    submitPartForm() {
      this.$refs.partFormRef.validate((valid) => {
        if (valid) {
          // 找到当前设备的部件并更新
          const deviceIndex = this.devices.findIndex(item => item.machineId === this.currentDevice.machineId);
          if (deviceIndex !== -1) {
            const partIndex = this.devices[deviceIndex].parts.findIndex(p => p.partId === this.partForm.partId);
            if (partIndex !== -1) {
              this.devices[deviceIndex].parts[partIndex] = { ...this.partForm };
              this.$message.success('部件编辑成功！');
              this.partDialogVisible = false;
              this.filterDevices();
            }
          }
        }
      });
    },

    // ---------------------- 数据导出与统计方法 ----------------------
    // 导出设备数据
    exportDeviceData() {
      this.$confirm('确定要导出当前筛选的设备数据吗？', '提示', { type: 'info' }).then(() => {
        this.tableLoading = true;
        setTimeout(() => {
          // 模拟导出逻辑（实际项目中需对接后端导出接口）
          // const exportData = this.filteredDevices.map(device => ({
          //   设备编号: device.machineId,
          //   设备名称: device.machineName,
          //   设备类型: this.getDeviceTypeName(device.deviceType),
          //   设备状态: device.machineStatus,
          //   购入时间: device.machinePurchaseDate,
          //   功率(kW): device.power,
          //   部件总数: device.parts.length,
          //   正常部件数: device.parts.filter(p => p.partStatus === '正常').length,
          //   故障部件数: device.parts.filter(p => p.partStatus === '故障').length
          // }));
          //
          // // 简单CSV导出示例
          // const csvContent = `data:text/csv;charset=utf-8,${Object.keys(exportData[0]).join(',')}\n${exportData.map(row => Object.values(row).join(',')).join('\n')}`;
          // const encodedUri = encodeURI(csvContent);
          // const link = document.createElement('a');
          // link.setAttribute('href', encodedUri);
          // link.setAttribute('download', `设备数据_${new Date().toLocaleDateString()}.csv`);
          // document.body.appendChild(link);
          // link.click();
          // document.body.removeChild(link);
          //
          // this.tableLoading = false;
          // this.$message.success('设备数据导出成功！');
        }, 800);
      }).catch(() => {
        this.$message.info('已取消导出操作');
      });
    },
    // 统计正常部件数
    getNormalPartCount() {
      return this.selectedDevice.parts
          ? this.selectedDevice.parts.filter(p => p.partStatus === '正常').length
          : 0;
    },
    // 统计故障部件数
    getFaultPartCount() {
      return this.selectedDevice.parts
          ? this.selectedDevice.parts.filter(p => p.partStatus === '故障').length
          : 0;
    },

    // 新增部件列表分页方法
    handlePartSizeChange(val) {
      this.partPageSize = val;
      this.partCurrentPage = 1;
    },
    handlePartCurrentChange(val) {
      this.partCurrentPage = val;
    },
    // 新增部件数据导出方法
    exportPartData() {
      // 实现部件数据导出逻辑
      console.log('导出部件数据', this.filteredParts);
      this.$message.success('部件数据导出成功');
    },
    // 调整部件编辑方法（适配新的部件列表）
    editPartOfCom(part) {
      this.partForm = { ...part };
      // 查找当前部件所属的机器
      this.currentDevice = this.devices.find(device =>
          device.machineId === part.machineId
      );
      this.partDialogVisible = true;
    }
  }
};
</script>

<style lang="scss" scoped>
@use '@/assets/styles/variables' as *;

// 通用样式
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex-center {
  display: flex;
  align-items: center;
}
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.ml-10 { margin-left: 10px; }
.ml-15 { margin-left: 15px; }
.ml-20 { margin-left: 20px; }
.mr-10 { margin-right: 10px; }
.text-2xl { font-size: 20px; }
.font-bold { font-weight: 700; }
.font-medium { font-weight: 500; }
.text-primary { color: $primary-color; }
.text-gray-500 { color: #606266; }

// 设备详情样式
.detail-header {
  align-items: center;
  .detail-avatar {
    background-color: $primary-color;
    color: #fff;
    font-size: 40px;
  }
  .detail-header-info {
    flex: 1;
    .detail-id {
      font-size: 14px;
      color: #606266;
    }
  }
}
.detail-title {
  font-size: 16px;
  color: #303133;
}

// 按钮容器样式（强制单行）
.btn-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  white-space: nowrap !important;
}
::v-deep .table-btn {
  width: 65px !important;
  margin-right: 8px !important;
  padding: 8px 0 !important;
  white-space: nowrap !important;
}
::v-deep .table-btn:last-child {
  margin-right: 0 !important;
}

// 响应式调整
@media (max-width: 1200px) {
  .device-table {
    ::v-deep .el-table {
      min-width: 1200px;
      overflow-x: auto;
      display: block;
    }
  }
}
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start !important;
    .header-actions {
      width: 100%;
      margin-top: 10px;
      flex-wrap: wrap;
    }
  }
  .detail-header {
    flex-direction: column;
    align-items: center !important;
    .detail-header-info {
      margin-left: 0;
      margin-top: 10px;
      text-align: center;
    }
  }
}
</style>